<template>
  <p style="font-weight:800;">EchartsLast组件(Echarts_02)</p>
  <v-chart class="chart" :option="option" />
</template>

<script setup>

// import { computed } from "@vue/reactivity";
import { ref } from "vue";
//
const data = ref([
  { value: 110, name: 'A', },
  { value: 210, name: 'B', },
  { value: 60, name: 'C', },
  { value: 77, name: 'D', },
  { value: 88, name: 'E', },
  { value: 49, name: 'F', },
  { value: 89, name: 'G', },
  { value: 99, name: 'H', },
]);

// setInterval(() => {
//   data.value = data.value.map(item => ({
//     ...item,
//     value: Math.random() * 100,
//   }))
// }, 1000);

// const option = computed(() => {
//   return {
//     xAxis: {
//       type: 'category',
//       data: data.value.map(d => d.name),
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [
//       {
//         data: data.value.map(d => d.value),
//         type: 'line'
//       }
//     ]
//   }
// });

const option = ref({
  xAxis: {
    type: 'category',
    data: data.value.map(d => d.name),
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data.value.map(d => d.value),
      type: 'line'
    }
  ]
});
</script>

<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>